<template>
  <div class="pruchase">
    <template v-if="bondList.length>0 && type == 1">
      <div class="list" v-for="bond in bondList" :key="bond.item_id">
        <div class="list-main">
          <div class="list-img">
            <img :src="bond.pic_url">
          </div>
          <div class="content">
            <div class="title"><img src="https://img.wifenxiao.com/h5-wfx/images/DZ/qmsc/bzj-tag.png" class="tag">{{bond.title}}</div>
            <div class="step">
              <div class="money">进货价<span v-html="scaleGoodsPriceFn(bond.price, 'package')"></span></div>
              <div>
                <count-plug v-model="bond.nums"
                  :disabled="disabled"
                  :itemId="bond.item_id"
                  skuId="0"
                  :minLimit=1
                  :maxLimit=1
                >
                </count-plug>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <div class="list" v-for="(list,index) in purchaseList" :key="list.item_id">
      <div class="list-main">
        <div class="list-img">
          <img :src="list.pic_url">
        </div>
        <div class="content">
          <div class="title">{{list.title}}</div>
          <div class="step">
            <div class="money">进货价<span v-html="scaleGoodsPriceFn(list.price, 'package')"></span></div>
            <div v-if="list.sku_list.length == 0">
              <count-plug v-model="list.nums"
                :disabled="disabled"
                :itemId="list.item_id"
                skuId=0
                :minLimit="minLimit"
                @changeNum="changeNum(arguments,index+1,list.price)">
              </count-plug>
            </div>
          </div>
        </div>
      </div>
      <div class="sku-details"  v-if="list.sku_list.length > 0" v-show="list.show">
        <div class="list-main">
          <div class="sku-title">商品规格</div>
          <div class="sku-title">价格</div>
          <div class="sku-title"></div>
        </div>
        <div class="list-main sku-content" v-for="(sku,skuIndex) in list.sku_list" :key="sku.sku_id">
          <div class="sku-title">{{sku.sku_name}}</div>
          <div class="sku-title"><span v-html="scaleGoodsPriceFn(sku.price, 'package')"></span></div>
          <div class="sku-title">
            <count-plug v-model="sku.nums"
                :disabled="disabled"
                :itemId="list.item_id"
                :skuId="String(sku.sku_id)"
                :maxLimit="sku.num"
                :minLimit="minLimit"
                @changeNum="changeNum(arguments,`${index+1}-${skuIndex}`,sku.price)">
              </count-plug>
          </div>
        </div>
      </div>
      <div class="show-sku" v-if="list.sku_list.length > 0" @click="onSku(index)">
        <template v-if="!list.show">点击查看规格</template>
        <template v-else>点击收起</template>
      </div>
    </div>
  </div>
</template>
<script>
import { scaleGoodsPrice } from '@/utils/index.js'
import countPlug from '@/components/CountPlug'
export default {
  components: {
    countPlug
  },
  props: {
    purchaseList: {
      type: Array,
      default: []
    },
    type: {
      type: Number,
      default: 0
    },
    bondList: {
      type: Array,
      default: []
    },
    choose: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      disabled: true,
      addList: {},
      minLimit: 0,
      total: 0
    }
  },
  watch: {
    bondList(val) {
      if (this.choose) {
        this.addList = {}
      }
      if (val.length > 0) {
        const params = {
          num: 1,
          item_id: val[0].item_id,
          sku_id: 0,
          price: val[0].price,
          boundStatus: true
        }
        this.addList[0] = params
      } else {
        this.addList[0] = {
          num: 0,
          item_id: '',
          sku_id: 0,
          price: 0,
          boundStatus: false
        }
      }
      this.onTotal()
      this.$emit('changeNumList', this.addList)
      this.$emit('changeTotal', this.total)
    }
  },
  methods: {
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price, 'large')
    },
    // 加减数量
    changeNum(agr, index, price) {
      const params = {
        num: agr[0],
        item_id: agr[2],
        sku_id: agr[3],
        price
      }
      this.addList[index] = params
      this.onTotal()
      this.$emit('changeNumList', this.addList)
      this.$emit('changeTotal', this.total)
    },
    onTotal() {
      let sum = 0
      for (const i in this.addList) {
        sum += this.addList[i].price * this.addList[i].num
      }
      this.total = sum
      // console.log('this.addList', this.addList)
    },
    onSku(index) {
      this.purchaseList[index].show = !this.purchaseList[index].show
    }
  }
}
</script>
<style lang="scss">
.pruchase{
  padding-bottom: 100rpx;
  .list{
    background: #fff;
    margin: 16px 16px 0 16px;
    padding: 18px 12px;
    .list-main{
      display: flex;
      .list-img{
        width: 180px;
        height: 180px;
        margin-right: 32px;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 8px;
        }
      }
      .content{
        position: relative;
        flex: 1;
        .title{
          font-size: 28px;
          line-height: 40px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp:2;
          text-align: justify;
          overflow: hidden;
          .tag{
            width: 68px;
            margin-right: 10px;
            position: relative;
            top: 6px;
          }
        }
        .step{
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          display: flex;
          justify-content: space-between;
          .money{
            color: #F42B2B;
          }
        }
      }
    }
    .sku-details{
      // sku
      .list-main{
        justify-content: space-between;
      }
      .sku-title{
        margin-top: 28px;
        flex: 1;
        text-align: center;
        font-size: 26px;
      }
      .sku-content{
        color: #999;
      }
    }
  }
}
.show-sku{
  font-size: 24px;
  color: #666;
  text-align: center;
  margin-top: 36px;
}


</style>